<script setup>
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { animationParams, secondPageIcons } from '@/stores/homeData.js'
import lottie from 'lottie-web';

gsap.registerPlugin(ScrollTrigger);


const animation = ref(null);
const lottieTeacher = ref(null)

onMounted(() => {

  animation.value = lottie.loadAnimation({
    container: lottieTeacher.value,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: `https://kanekikeh.online/A/lotties/Teacher.json`,
    fps: 60
  });

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: '.Second_container',
      scrub: true,
      pin: true,
      start: 'top top',
      end: '200%'

      // start: 'top center',
      // end: 'center center',
    }
  });

  // 容器的动画，增加持续时间并使用柔和的缓动函数
  tl.to(".Second_container", { opacity: 1, duration: 2, ease: "power2.out" });

  // 标题的动画，增加持续时间并适当调整延迟，使用柔和的缓动函数
  tl.to(".Second_title", {
    ease: "power2.out",
    opacity: 1,
    transform: "scale(1)",
    duration: 2
  }, "+=1"); // 在容器动画后延迟1秒开始

  // 教育图片的动画，增加持续时间并适当调整延迟，使用柔和的缓动函数
  tl.to(".education", {
    ease: "power2.out",
    opacity: 1,
    transform: "scale(1)",
    top: "0%",
    duration: 2
  }, "+=1"); // 在标题动画后延迟1秒开始

  // 每个组的动画，增加持续时间并适当调整延迟，使用柔和的缓动函数
  secondPageIcons.forEach((group, index) => {
    tl.to(`.Second_group${index + 1}`, {
      ...animationParams[index],
      ease: "power2.out",
      opacity: 1,
      transform: "scale(1)",
      duration: 2.5 // 增加每个组动画的持续时间
    }, `+=${index === 0 ? 1 : 0.5}`); // 第一个组在教育图片动画后延迟1秒开始，其余组之间有0.5秒的延迟
  });
});
</script>

<template>
  <v-container fluid class="Second_container" ref="secondePage">
    <v-row class="d-flex justify-center">
      <div class="Second_title">文传在线名师课堂</div>
    </v-row>

    <div class="Second_content">
      <div class="imgGroup">
        <img class="education" src="https://kanekikeh.online/A/Home/education.png" alt="" />
        <!-- <div ref="lottieTeacher" class="education"></div> -->

        <div v-for="(group, index) in secondPageIcons" :class="`Second_group${index + 1}`" class="Second_group"
          :key="index">
          <img :src="group.imgSrc" alt="" />
          <div>{{ group.text }}</div>
        </div>
      </div>
    </div>
    <!-- <v-row class="footer"></v-row> -->
  </v-container>
</template>



<style scoped lang="scss">
// 定义媒体查询参数
$breakpoints: (
  'phone':320px,
  'pad':481px,
  'notebook':769px,
  'desktop':1025px,
  'tv':1201px
);

// 定义媒体查询混合
@mixin respondTo($breakname) {
  $bp: map-get($breakpoints, $breakname);

  @media(min-width:$bp) {
    @content
  }
}

;

@mixin imgSize($position, $size, $width, $height) {
  background-position: $position;
  background-size: $size;
  width: $width;
  height: $height;
  @content
}

;

.Second_container {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-image: linear-gradient(to top, #b3cee1, #FFFFFF);
}

.Second_title {
  font-size: 1.5em;
  letter-spacing: 2px;
  color: #3c3c43;
  font-weight: bold;
  margin-top: 15vh;
  opacity: 0;
  transform: scale(0);
}

.Second_content {
  width: 60vw;
  height: 70vh;
  position: absolute;
  left: 20vw;
  top: 10vh;

  margin-top: 10vh;
  // background-color: brown;
}

.imgGroup {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3;

  & .education {
    width: 50%;
    height: 100%;
    position: absolute;
    left: 25%;
    top: 30%;
    opacity: 0;
    transform: scale(0.5);
  }
}


.Second_group {
  width: 15%;
  height: 30%;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 2;
  transform: scale(0);

  & img {
    width: 100%;
    height: 100%;
  }

  & div {
    margin-top: 5px;
    font-weight: bold;
    color: #65656a;
    font-size: 0.9rem;
  }
}

.Second_group1 {
  top: 35%;
  left: 45%;
}

.Second_group2 {
  bottom: 35%;
  left: 45%;
}

.Second_group3 {
  top: 35%;
  right: 45%;
}

.Second_group4 {
  bottom: 35%;
  right: 45%;
}

.footer {
  position: absolute;
  width: 100vw;
  height: 25%;
  bottom: 2%;
  right: 1%;
  background-image: url('/src/assets/images/allin.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}
</style>